<template>
  <view class="content">
    <!-- <view class="title">文字筛选</view> -->
    <view class="search btn-list" style="display: flex; margin: 20px 0">
      文字：<input v-model="wenzi" type="text" style="background-color: #eee" />
    </view>
    <view class="btn-list">
      <button type="primary" @click="get">查询</button>
    </view>
    <view class="btn-list">
      <ul v-for="item in resultItems" :value="item" :key="item.index">
        <li title="" note="">{{ item.name }}: {{ item.value }}</li>
        <br />
      </ul>
    </view>
  </view>
</template>
<script setup>
import pinyin from "pinyin/lib/pinyin-web.js";
import { useRoute } from 'vue-router'
import { getCurrentInstance, ref, reactive } from 'vue';

console.log(pinyin);
let { proxy } = getCurrentInstance()
let resultItems = ref([])
let wenzi = ref('')
console.log(useRoute().query, proxy, resultItems);
let query = useRoute().query
console.log(query.zi)
if (query.zi) {
  wenzi = query.zi
  get()
}

function get() {
  console.log(wenzi);
let str = typeof(wenzi) =='string'?wenzi:wenzi.value
  let res = ''
  let allWords = proxy.$allWords
  console.log(allWords.wordsJin);
  if (allWords.wordsJin[str]) {
    res = allWords.wordsJin[str]
  } else if (allWords.wordsMu[str]) {
    res = allWords.wordsMu[str]
  } else if (allWords.wordsShui[str]) {
    res = allWords.wordsShui[str]
  } else if (allWords.wordsHuo[str]) {
    res = allWords.wordsHuo[str]
  } else if (allWords.wordsTu[str]) {
    res = allWords.wordsTu[str]
  }

  putRestult(res)
}
function putRestult(res) {
  console.log(res);
  if (!res) {
    resultItems.value = []
    return
  }
  resultItems.value = []
  console.log(resultItems);
  for (let key in res) {
    let name = ''
    switch (key) {
      case 'zi':
        name = '文字'
        break;
      case 'fbihua':
        name = '笔画'
        break;
      case 'wuxing':
        name = '五行'
        break;
      case 'pinyin':
        name = '拼音'
        break;
      case 'fan':
        name = '繁体'
        break;
        case 'shengpi':
          name="是否生僻字"
    }
    if(key=='pinyin'){
      resultItems.value.push({ 'name': name, 'value': pinyin(res.zi,{
  heteronym: true,              // 启用多音字模式
})[0].join('、') })
    }else{
      resultItems.value.push({ 'name': name, 'value': res[key] })
    }
    
  }
  console.log(resultItems.value.length);
}
</script>

<style>
.content {
  padding-bottom: 30px;
}

.title {
  font-weight: bold;
  text-align: center;
  padding: 20px 0px;
  font-size: 20px;
}

.tips {
  /* color: #999999; */
  font-size: 14px;
  padding: 20px 30px;
}

.btn-list {
  padding: 0px 30px;
}

.btn-list button {
  margin-bottom: 20px;
}

.upload-preview {
  width: 100%;
}
</style>
